<template>
  <div>
    <vo-table ref="yuTable" :data="data.tableData" @getSelectionRows="getSelectionRows">
      <template #leftBar>
        <tiny-input v-model="data.search.taskName" placeholder="任务名称"></tiny-input>
        <tiny-button type="primary" @click="querySysTaskGroup">查询</tiny-button>
      </template>
      <template #rightBar>
        <tiny-button-group class="ml-4">
          <tiny-button type="primary" @click="addTask">新增</tiny-button>
          <tiny-button type="primary" @click="delBatch">删除</tiny-button>
        </tiny-button-group>
      </template>
      <template v-slot:handleSlot="{row}">
        <tiny-button text type="success" size="small" @click="edit(row)">编辑 </tiny-button>
        <tiny-button text size="small" type="danger" @click="del(row)">删除 </tiny-button>
      </template>
    </vo-table>
    <yu-dialog :data="data.dialogConfig" v-model:isShow="data.isShow">
      <TaskGroupEdit :editData="data.editData" v-model:isShow="data.isShow"></TaskGroupEdit>
    </yu-dialog>
  </div>
</template>

<script setup>
  import {reactive, ref, getCurrentInstance, onBeforeMount} from 'vue';
  import TaskGroupEdit from './TaskGroupEdit.vue';
  const {proxy} = getCurrentInstance();
  const data = reactive({
    search: {},
    sysTaskGroup: [],
    tableData: {data: [], cols: [], tableArrts: {haspage: true}},
    editData: {},
    dialogConfig: {width: '500px'},
    isShow: false,
  });
  
  const addTask = () => {
    data.dialogConfig.title = '新增';
    data.dialogConfig.width = '500px';
    data.dialogConfig.height = '200px';
    data.isShow = true;
    data.editData = {};
  };
  const edit = (row, rowIndex) => {
    data.dialogConfig.title = '修改';
    data.dialogConfig.width = '500px';
    data.dialogConfig.height = '200px';
    data.isShow = true;
    data.editData = row;
  };
  data.tableData.cols = [{type: 'selection'}, {title: '任务组名', key: 'groupName', align: 'center', width: 180}, {title: '操作', slot: 'handleSlot', width: 180}];
  const querySysTaskGroup = () => {
    proxy.$api.system.getSysTaskGroupDict().then(res => {
      data.tableData.data = res; //更新数据
    });
  };
</script>

<style lang="scss" scoped></style>
